<template>
    <div>
        <el-dialog v-model="isShowUpdate" :title="dialogTitle" width="500">
            <el-form :model="operatingItem">
                <!-- calender -->
                <el-form-item label="日期" :label-width="formLabelWidth">
                    <el-date-picker v-model="operatingItem.time" type="date" placeholder="请选择日期" value-format="YYYY-MM-DD" />
                </el-form-item>
                <!-- 选择器，收入分类 -->
                <el-form-item label="分类" :label-width="formLabelWidth">
                    <el-select v-model="operatingItem.typeKey" id="type1" placeholder="请选择分类"
                        style="width: 120px;margin-right:40px">
                        <el-option v-for="item in financeStore.incomeType" :key="item.id" :label="item.typeName" :value="item.id" />
                    </el-select>
                </el-form-item>
                <!-- 选择器 -->
                <el-form-item label="成员" :label-width="formLabelWidth">
                    <el-select v-model="operatingItem.member" id="member" placeholder="请选择成员"
                        style="width: 120px;margin-right:40px">
                        <el-option v-for="item in memberStore.member" :key="item.id" :label="item.name"
                            :value="item.id" />
                    </el-select>
                </el-form-item>
                <!-- 数字输入框 -->
                <el-form-item label="金额" :label-width="formLabelWidth">
                    <el-input-number v-model="operatingItem.amount" autocomplete="off" />
                </el-form-item>
                <!-- 文本域 -->
                <el-form-item label="描述" :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="operatingItem.description" autocomplete="off" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="cancelOperation">取消</el-button>
                    <el-button type="primary" @click="confirmOperation">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { computed, watch } from 'vue'
import { IncomeItemForInteraction } from '@/types/income';
import useMemberStore from '@/store/modules/member';
import useFinanceStore from '@/store/modules/finance';
import { addIncome, modifyIncome } from '@/api/income';
const memberStore = useMemberStore()
const financeStore = useFinanceStore()
const emit = defineEmits(['addElement'])

let isShowUpdate = defineModel<Boolean>('isShowUpdate')
let operatingItem = defineModel<IncomeItemForInteraction>('operatingItem', {
    required:true
})
let dialogType = defineModel('dialogType')
let dialogTitle = computed(() => {
    return dialogType.value === 0 ? '新增收入数据' : '修改收入数据'
})

watch(isShowUpdate, () => {
    // 打开和关闭弹窗时要做的
    if (!isShowUpdate.value) {
        operatingItem.value = {
            id: 0,
            time: '',
            typeKey: null,
            amount: 0,
            member: 0,
            description: ''
        }
    }
})
const cancelOperation = () => {
    isShowUpdate.value = false
}
const confirmOperation = async () => {
    // 如果类型为0，那么发送增加请求，否则发送修改请求
    if (dialogType.value === 0) {
        await addIncome(operatingItem.value)
    } else {
        await modifyIncome(operatingItem.value)
    }
    emit('addElement')
    isShowUpdate.value = false
}
const formLabelWidth = '140px'
</script>

<style scoped></style>